<template>
  <div>
    <!--    返回主页按钮-->
    <div class="itemLeft" >
      <div style="float: left;"><h2> <van-icon name="arrow-left" @click="$router.go(-1)" />MV</h2>
      </div>
      <div style="float: left;margin-left: 70%;" @click="$router.push('/')"><van-icon name="wap-home" />首页</div>
    </div>

    <!-- mv视频 -->
    <video
        class="video-wrap"
        autoplay
        controls
        :src="url"
        style="margin-top: 0"
    ></video>


    <!-- 当前播放的mv信息（MV名称、作者、播放量） -->
    <div>
      <div class="mv-info">
        <h2 class="title">{{ mvInfo.name }}</h2>
        <span class="name">{{ mvInfo.artistName }}</span><br>
        <span class="data">发布：{{ mvInfo.publishTime }}</span>
        <span class="number">播放：{{ mvInfo.playCount }}次</span>
        <p class="desc">
          {{ mvInfo.desc }}
        </p>
      </div>
    </div>

    <!--相关推荐的mv信息-->
    <div style="margin-bottom: 150px;height: 665px">
      <div >
        <h3 class="title">相关推荐</h3>
        <div v-for="(item,index) in simiMvs" :key="index" class="item"  style="width: 100% ;margin-bottom: 2px; height: 136px" @click="toMV(item.id)">
          <!--MV封面-->
          <div class="img-wrap">
            <img :src="item.cover" alt="" style="" />
            <!--MV封面上的播放图标和MV总时间-->
            <span class="playCount">
               <svg class="icon" aria-hidden="true">
                 <use xlink:href="#icon-gl-play-copy" style=""></use>
               </svg>
                {{ item.duration }}
               </span>
          </div>
          <!--相关推荐Mv右边的Mv信息（Mv名称、Mv作者、播放量、MvId）-->
          <div class="info-wrap">

            <div class="name" style="padding-top: 30px"><h3>{{ item.name }}</h3></div>
            <div class="singer" style="padding-top: 2px">{{ item.artistName }}</div>
            <span class="singer" style="padding-top: 5px">{{ changeCount(item.playCount)}}播放量</span><br>

          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import axios from "axios";
import TopNav from "@/components/home/TopNav.vue";
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";

export default {
  name: "MvDetail",
  data() {
    return {
      //mv地址
      url: "",
      //mv信息
      mvInfo:{},
      //mv推荐
      simiMvs:[],

    }
  },
  created() {
    // 最新mv
    axios({
      url: 'http://localhost:3000/mv/url',
      method: 'get',
      params:{
        id:this.$route.query.id
      }
    }).then(res => {
      console.log("获取ID")
      console.log(this.$route.query.id)
      console.log(res)
      this.url=res.data.data.url
    })
    //获取mv信息
    axios({
      url: "http://localhost:3000/mv/detail",
      method: "get",
      params: {
        mvid: this.$route.query.id
      }
    }).then(res => {
      console.log(res)
      this.mvInfo = res.data.data
    })
    //获取相关mv
    axios({
      url:"http://localhost:3000/simi/mv",
      method:"get",
      params:{
        mvid:this.$route.query.id
      }
    }).then(res=> {
      console.log(res)
      this.simiMvs = res.data.mvs
      //优化时间格式
      for(let i=0;i<this.simiMvs.length;i++) {
        let duration = this.simiMvs[i].duration;       //获取时间
        let min = parseInt(duration / 1000 / 60);    //修改时间格式
        if (min < 10) {
          min = '0' + min
        }
        let sec = parseInt(duration / 1000 % 60)
        if (sec < 10) {
          sec = '0' + sec
        }
        //console.log(min+" "+sec)
        this.simiMvs[i].duration = `${min}:${sec}`
      }
    })
  },
  setup(){
    //定义changeCount方法来将播放量转为中文 如： 100000 => 10万
    function changeCount(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + "亿";
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + "万";
      }else  {
        return num;
      }
    }
    return { changeCount };
  },
  inject: ["routerReload"],
  methods:{
    // 去mv详情页
    toMV(value){
      console.log("value=")
      console.log(value)
      this.$router.push("/MvDetail?id="+value)
      // this.$router.go(0)

    },
    reload(){
      this.routerReload()
    }
  },
  watch:{
    '$route':()=>{
      window.location.reload()
    }
  }
}
</script>



<style scoped>
.video-wrap {
  width: 100%;
  height: 200px;
  margin-bottom: 20px;
}
singer-info {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 35px;
  height: 100%;
  font-weight: 400;
}
avatar-wrap {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-right: 10px;
  overflow: hidden;
}
.desc {
  font-size: 15px;
  margin-top: 20px;
}
.number {
  color: #bebebe;
  font-size: 14px;
  margin-left: 20px;
}
.data{
  color: #bebebe;
  font-size: 14px;
}
.title{
  margin-top: 20px;
  font-size: 30px;
  margin-bottom: 10px;
}
.name{

}
.video-wrap{
  border-radius: 5px;
  width: 100%;
  height: 390px;
}
.singer{
  font-size: 14px;
  color: #c5c5c5;
}
img {
  width: 100%;
  height: 2.4rem;
  border-radius: 0.2rem;

}
.playCount {
  position: absolute;
  z-index: 100;
  right: 0.1rem;
  color: white;
  margin-top: 2rem;

}
.icon {
  width: 0.3rem;
  height: 0.4rem;
}
.img-wrap{
  width: 50%;
  float:left;
  display:inline;
  position: relative;
}
.info-wrap{
  padding-top: 30px;
  display:inline
}

</style>
